@charset "UTF-8";
// weex Flex 成员项暂不支持 flex-shrink 和 flex-basis 属性 该属性不支持 flex: <flex-grow> | <flex-shrink> | <'flex-basis> 的简写
// https://doc.weex.io/zh/docs/styles/common-styles.html#flexbox

@mixin display($value: flex, $prefix: null, $important: null) {
  @if $important {
    @if $prefix {
      display: -webkit-#{$value} !important;
    }
    display: $value !important;
  } @else {
    @if $prefix {
      display: -webkit-#{$value};
    }
    display: $value;
  }
}

@mixin display-flex-direction($direction: row, $value: flex, $prefix: null, $important: null) {
  /* #ifndef APP-PLUS-NVUE */
  @include display($value: $value, $prefix: $prefix, $important: $important);
  /* #endif */
  @if ($important) {
    flex-direction: $direction !important;
  } @else {
    flex-direction: $direction;
  }
}

@mixin flex-wrap($value: nowrap) {
  flex-wrap: $value;
}

@mixin flex-shrink($value: 1) {
  /* #ifndef APP-NVUE */
  flex-shrink: $value;
  /* #endif */
}

@mixin flex-basis($value: auto) {
  /* #ifndef APP-NVUE */
  flex-basis: $value;
  /* #endif */
}

@mixin flex-grid {
  @include display();
  @include flex-wrap(wrap);
}

// box-pack、box-align 这些是TaroUI中过来的，留着
@mixin align-items($value: stretch, $prefix: null) {
  align-items: $value;
  @if $prefix {
    @if $value == flex-start {
      -webkit-box-align: start;
    } @else if $value == flex-end {
      -webkit-box-align: end;
    } @else {
      -webkit-box-align: $value;
    }
  }
}

@mixin align-content($value: flex-start) {
  /* #ifndef APP-NVUE */
  align-content: $value;
  /* #endif */
}

@mixin justify-content($value: flex-start, $prefix: null) {
  justify-content: $value;
  @if $prefix {
    @if $value == flex-start {
      -webkit-box-pack: start;
    } @else if $value == flex-end {
      -webkit-box-pack: end;
    } @else if $value == space-between {
      -webkit-box-pack: justify;
    } @else {
      -webkit-box-pack: $value;
    }
  }
}

@mixin flex-center {
  @include display();
  @include align-items(center);
  @include justify-content(center);
  @include align-content(center);
}

@mixin flex-direction($direction: row) {
  flex-direction: $direction;
}

// Flex Item
@mixin flex($fg: 1, $fs: null, $fb: null, $prefix: null) {
  flex: $fg $fs $fb;
  @if $prefix {
    -webkit-box-flex: $fg;
  }
}

@mixin flex-order($n) {
  order: $n;
  -webkit-box-ordinal-group: $n;
}

@mixin align-self($value: auto) {
  align-self: $value;
}
